<!--
 * @Descripttion: 
 * @version: 
 * @Author: 
 * @Date: 2019-09-28 09:28:27
 -->
<template>
  <div id="metaDataType">
    <div class="container">
      <div class="view">
        <div class="aside">
          <el-scrollbar :native="false"
                        tag="section"
                        class="el-scroll">
            <el-tree :data="treeData"
                     default-expand-all
                     @node-click="handleNodeClick"
                     @node-contextmenu="rightClick"
                     :props="defaultProps"></el-tree>
          </el-scrollbar>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="right">
          <div class="container">
            <div class="view">
              <div class="top tr">
                <el-button type="primary"
                           size="small"
                           @click="addmetaDataTypeList">添加</el-button>
              </div>
              <div class="table">
                <el-scrollbar :native="false"
                              tag="section"
                              class="el-scroll">
                  <el-table :data="tableData"
                            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                            v-loading="Loading"
                            element-loading-text="数据加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(21, 29, 54, 0.8)"
                            border
                            highlight-current-row
                            @selection-change="selChange">
                    <el-table-column type="selection"
                                     width="35"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num1"
                                     label="类型编码"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num2"
                                     label="类型名称"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num3"
                                     label="描述"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num4"
                                     label="创建时间"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num5"
                                     label="是否发布节点"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num6"
                                     label="状态"></el-table-column>
                    <el-table-column align="center"
                                     :show-overflow-tooltip="true"
                                     prop="num7"
                                     label="元模型映射"></el-table-column>
                    <el-table-column label="操作"
                                     width="400"
                                     align="center">
                      <template slot-scope="scope">
                        <el-button size="mini"
                                   type="primary"
                                   @click="rewrite(scope.row)">修改</el-button>
                        <el-button size="mini"
                                   :type="scope.row.status == '0'? 'danger':'success'"
                                   @click="showStatus(scope.row)">{{scope.row.status == 0? '启用':'停用'}}</el-button>
                        <el-button size="mini"
                                   type="danger"
                                   @click="deleteList(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-scrollbar>
              </div>
              <div class="bottom">
                <el-pagination layout="total, sizes, prev, pager, next"
                               background
                               :page-count="10"
                               :page-sizes="[5, 10, 20, 40]"
                               :page-size="page.pageSize"
                               :total="page.total"
                               :current-page="page.pageNum"
                               @current-change="changePage"
                               @size-change="sizeChange"></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 鼠标位置模态框 -->
    <div v-show="menuVisible">
      <ul id="menu"
          class="menu">
        <li class="menu__item">添加</li>
        <li class="menu__item">重命名</li>
        <li class="menu__item">删除</li>
      </ul>
    </div>
    <!-- 点击添加表格数据  弹窗 -->
    <el-dialog title="添加表格数据"
               :visible.sync="addTableShow"
               width="60%">
      <el-form :model="addListForm"
               ref="addFormRefs"
               :rules="addFormRules"
               label-position="right"
               label-width="120px">
        <el-form-item label="类型名称："
                      prop="ruleName">
          <el-input v-model="addListForm.ruleName"
                    placeholder="类型名称"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="addListForm.des"
                    placeholder="描述"></el-input>
        </el-form-item>
        <el-form-item label="是否发布节点：">
          <el-switch v-model="addListForm.status"></el-switch>
        </el-form-item>
        <el-form-item label="状态：">
          <el-switch v-model="addListForm.status"></el-switch>
        </el-form-item>
        <el-form-item label="元模型映射：">
          <el-select v-model="addListForm.formulateObject">
            <el-option :label="item.formulateObject"
                       v-for="item in labelListData"
                       :key="item.formulateObject"
                       :value="item.formulateObject"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addTableShow = false;addListForm={remarks:'',typeName: ''}">取 消</el-button>
        <el-button type="primary"
                   @click="onSubmitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'metaDataTypeView',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    Loading: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: () => {
        return {}
      }
    },
    labelListData: {
      type: Array,
      default: () => { }
    }
  },
  data () {
    return {
      menuVisible: false,
      defaultProps: {
        children: "child",
        label: "name"
      },
      addTableShow: false,
      addListForm: {
        ruleName: ''
      },
      addFormRules: {
        ruleName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    //  点击选择
    selChange () {
      this.$emit('selChange')
    },
    // tree点击右键菜单
    rightClick (MouseEvent, data, Node, element) {
      console.log('我是节点数据', MouseEvent, data, Node, element)
      this.menuVisible = false
      this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector('#menu')
      menu.style.left = MouseEvent.clientX + 20 + 'px'
      document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      menu.style.top = MouseEvent.clientY + 0 + 'px'
      // console.log('右键被点击的event:', MouseEvent)
      // console.log('右键被点击的data:', data)
      // console.log('右键被点击的value:', Node)
      // console.log('右键被点击的element:', element)
      // console.log('鼠标点击了树形结构图')
    },
    foo () { // 取消鼠标监听事件 菜单栏
      this.menuVisible = false
      document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    //  点击节点事件获取表格数据
    handleNodeClick (data) {
      if (data.child !== undefined && data.child.length !== 0) return
      console.log(data)
      this.$emit('handleNodeClick', data)
    },
    // //  点击分页按钮
    changePage (pageNum) {
      console.log(pageNum)
      this.$emit('changePage', pageNum)
    },
    //  切换页数
    sizeChange (pageSize) {
      console.log(pageSize)
      this.$emit('sizeChange', pageSize)
    },
    //  修改
    rewrite (data) {
      console.log(data)
    },
    //  启用/停用
    showStatus (data) {
      console.log(data)
    },
    //  删除
    deleteList (data) {
      console.log(data)
    },
    //  点击添加表格数据
    addmetaDataTypeList () {
      this.addTableShow = true
    },
    //  添加数据版本规则点击确定按钮
    onSubmitForm () {
      this.$refs.addFormRefs.validate((valid) => {
        if (valid) {
          console.log(this.addListForm)
          if (this.addListForm.status) {
            this.addListForm.status = '0'
          } else {
            this.addListForm.status = '1'
          }
          moreUseApi.addDataRule(this.addListForm).then(res => {
            if (res.data.code === 200) {
              this.$message.success('注册成功')
              this.addTableShow = false
              this.page.idea = this.page.idea++
            } else {
              this.$message.error('服务器内部错误')
            }
          })
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import url("./metadataType.less");
</style>